{% extends "base.html" %}

{% block title %}播放历史 - 音乐推荐系统{% endblock %}

{% block head %}
<style>
    .history-item {
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    
    .history-item:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .history-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    
    .music-title {
        font-size: 1.2rem;
        font-weight: bold;
    }
    
    .history-date {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .music-info {
        margin-bottom: 10px;
    }
    
    .music-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .empty-message {
        text-align: center;
        padding: 50px 0;
        color: #6c757d;
    }
    
    .badge-like,
    .badge-dislike {
        padding: 5px 10px;
        border-radius: 20px;
        display: inline-block;
        margin-top: 5px;
    }
    
    .badge-like {
        background-color: #d9534f;
        color: white;
    }
    
    .badge-dislike {
        background-color: #f0ad4e;
        color: white;
    }
</style>
{% endblock %}

{% block body %}
<div class="container">
    <h2 class="mb-4">播放历史</h2>
    
    {% if histories %}
        <div class="history-list">
            {% for history in histories %}
                <div class="history-item">
                    <div class="history-header">
                        <a href="/music/{{ history.music.pk }}" class="music-title">{{ history.music.song_name }}</a>
                        <span class="history-date">{{ history.played_at|date:"Y-m-d H:i" }}</span>
                    </div>
                    
                    <div class="music-info">
                        <p>歌手: {{ history.music.artist_name }}</p>
                        <p>流派: {{ history.music.genre_ids }}</p>
                        <p>语种: {{ history.music.language }}</p>
                        
                        {% if history.music in user_likes %}
                            <span class="badge-like">已添加到喜欢</span>
                        {% endif %}
                        
                        {% if history.music in user_dislikes %}
                            <span class="badge-dislike">已添加到不喜欢</span>
                        {% endif %}
                    </div>
                    
                    <div class="music-actions">
                        <a href="/play/{{ history.music.pk }}" class="btn btn-primary btn-sm" target="_blank">播放</a>
                        <a href="/music/{{ history.music.pk }}" class="btn btn-info btn-sm">详情评论</a>
                        
                        {% if history.music not in user_likes %}
                            <a href="/like/{{ history.music.pk }}?from=/history/" class="btn btn-outline-danger btn-sm">喜欢</a>
                        {% endif %}
                        
                        {% if history.music not in user_dislikes %}
                            <a href="/dislike/{{ history.music.pk }}?from=/history/" class="btn btn-outline-warning btn-sm">不喜欢</a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
        
        <!-- 分页导航 -->
        <nav aria-label="历史记录分页">
            <ul class="pagination justify-content-center">
                {% if histories.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ histories.previous_page_number }}">上一页</a>
                    </li>
                {% endif %}
                
                <li class="page-item active">
                    <span class="page-link">
                        第 {{ histories.number }} 页 / 共 {{ histories.paginator.num_pages }} 页
                    </span>
                </li>
                
                {% if histories.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ histories.next_page_number }}">下一页</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% else %}
        <div class="empty-message">
            <h4>暂无播放历史</h4>
            <p>您还没有播放过任何音乐，去<a href="/all/">全部音乐</a>页面发现好听的音乐吧！</p>
        </div>
    {% endif %}
</div>
{% endblock %} 